<template>
  <div>
    <div><h3>黄金数据</h3></div>
    <div class="analyzeSystem">
        <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
data() {
    return {
      dataArr:[]
    }
  },
  props:{
      className: {
      type: String,
      default: "yourClassName"
    },
    id: {
      type: String,
      default: "yourID"
    },
    width: {
      type: String,
      default: "1000px"
    },
    height: {
      type: String,
      default: "500px"
    }
  },
  mounted(){
      this.gethuangjinData()
  },
  methods:{
    //接口地址：http://web.juhe.cn:8080/finance/gold/shgold
    // 返回格式：json
    // 请求方式：get
    // 请求示例：http://web.juhe.cn:8080/finance/gold/shgold?key=您申请的APPKEY
    // 接口备注：周末市场没有开放，故周末无数据，每2分钟更新一次
      gethuangjinData(){
            let data ={
                key : '89e87e516c4731307fc475d0e34e6f07'
            }
            this.queryhuangjinData(data)
      },
      queryhuangjinData(data){
          this.$axios.get('/apis','/finance/gold/shgold',data).then(res=>{
              console.log(res.result)
                this.dataArr = res.result
                if(this.dataArr.length >0){
                    this.initChart()
                }
            })
      },
      initChart() {
        let data = this.dataArr[0]
        let arr = []
        for(var i in data){
            arr.push(data[i])
        }
        var ZCJtotalvol = arr.map(function (item) {
            return item.totalvol;  //总成交
        })
        var KPJopenpri = arr.map(function (item) {
            return item.openpri;  //开盘价
        })
        var ZGJmaxpri =arr.map(function (item) {
            return item.maxpri;  //最高价
        })
        var ZGJminpri =arr.map(function (item) {
            return item.minpri;  //最低价
        })
        var SJtime = arr.map(function (item) {
            return item.time.substr(0,10);  //时间
        })
        this.chart = echarts.init(this.$refs.myEchart);
        this.chart.setOption({
            xAxis: {
              type: 'category',
              data: SJtime,
              boundaryGap: false,
            },
            legend: {
                data: [ '开盘价', '最高价', '最低价']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                  name: '开盘价',
                  type: 'line',
                  stack: '元',
                  data: KPJopenpri
                },
                {
                  name: '最高价',
                  type: 'line',
                  stack: '元',
                  data: ZGJmaxpri
                },
                {
                  name: '最低价',
                  type: 'line',
                  stack: '元',
                  data: ZGJminpri
                }
              ]
        })
    }
  }
}
</script>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
    
